<template>
   <div class="common-content">
     <k-tabs ref="tabRef" @change="changeTabs" :list="tabsList" ></k-tabs>
     <ul class="list-content">
       <li class="mask-box " @click="handleDetails(item)" v-for="(item,index) in dataList" :key="item.id">
         <div class="item">
           <div class="time_box">
             <p class="month">{{ $TOOL.dateFormat(item.updateDate, 'MM.DD') }}</p>
             <p>{{ $TOOL.dateFormat(item.updateDate, 'YYYY') }}</p>
           </div>
           <div class="info">
             <h4 class="line-2" >{{$TOOL.richTextWithUrlsRemove(item.title)  }}</h4>
             <p class="line-2 info-sub" v-html="$TOOL.getText(item.informationContent)">
             </p>
           </div>
         </div>
       </li>
       <el-empty v-if="dataList?.length===0" description="暂无数据."></el-empty>
     </ul>
     <div class="df-cc">
       <el-pagination background layout="prev, pager, next" :total="pagingData.total" v-model:current-page="pagingData.index"  @current-change="loadPageData"></el-pagination>
     </div>

   </div>
</template>

<script setup>
import {homeApi} from "@/api";
import {useRoute, useRouter} from "vue-router";
import KTabs from "@/components/k-tabs.vue";
const tabsList = [
  {
    name: "全省动态",
    code: "57e0bbef-cd40-4c9a-ba36-12bbc4d6ea46"
  },
  {
    name: "市场行情",
    code: "b82470fe-54ec-474f-aa47-884725ee14aa"
  },
];
const pagingData=reactive({
  dataList:[],
  index: 1,
  type: 2,
  teamId: '',
  moduleType: tabsList[0].code,
  total: 0
})
const tabRef=ref(null)
const route=useRoute()
const type=route.query.type
const dataList=ref([])
 onMounted(loadPageData)
function changeTabs(index){
  pagingData.moduleType=tabsList[index].code
  loadPageData()
}
onMounted(()=>{
  const index=(Number(type)-1)||0
  tabRef.value.clickTabItem(index)
})
 async function loadPageData(){

   const res = await homeApi.listPage.get(pagingData)
   dataList.value = res.data.sources||[]
   pagingData.total = res.data.countAll
 }

 const router=useRouter()
function handleDetails(item){
  router.push({
    path:'/details',
    query :{
      type:1,
      id:item.id
    }
  })
}
</script>

<style scoped lang="scss">
.common-content{
  background: #FFFFFF;
  padding: 30px;
  width: 70%;
  min-width: 1360px;
  .list-content {
    padding: 30px ;
    li:nth-child(3) {
      --bg-color: #60B9AA;
    }

    li:nth-child(4) {
      --bg-color: #60B9AA;
    }

    li {
      background: #F5F5F5;
    }

    .item {
      width: 100%;
      padding: 16px 10px;
      margin-bottom: 20px;
      display: flex;
      position: relative;
      z-index: 2;

      &:hover {
        .time_box {
          border-bottom: 1px solid #FFFFFF;
        }

        h4 {
          color: #FFFFFF;
        }

        .info-sub{
          line-height: 24px;
          color: #fff !important;
        }
      }

      .time_box {
        color: #FFFFFF;
        width: 65px;
        height: 65px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: var(--bg-color);
        border-bottom: 1px solid var(--bg-color);

        .month {
          font-size: 22px;
          font-weight: bold;
        }
      }

      .info {
        width: 200px;
        flex: 1;
        margin-left: 16px;
        font-size: 14px;
        text-indent: 20px;

        .info-sub {
          line-height: 24px;
          color: #666;
          font-size: 16px !important;
        }

        h4 {
          font-size: 18px;
          text-indent: 0px;
          margin-bottom: 8px;
        }

        p {
          color: #333;
        }
      }

    }
  }
}
</style>
